<template>
    <section>
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters">
            <el-form-item>
                <el-input v-model="filters.ip" placeholder="请输入查询ip"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" >查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" >新增</el-button>
            </el-form-item>
        </el-form>
    </el-col>


    <el-table
            highlight-current-row
            :data="assets"
            style="width: 100%"
            row-style="height:20px"
            cell-style="padding:0"
           >
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                sortable
                prop="assetId"
                label="编号"
                width="100">
        </el-table-column>

        <el-table-column
                sortable
                prop="ipAddress"
                label="内网IP"
                width="130">
        </el-table-column>
        <el-table-column
                prop="hostname"
                label="主机名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="system"
                label="系统"
                width="150">
        </el-table-column>
        <el-table-column
                prop="cpuMemory"
                label="cpu/memory(free)"
                width="180">
        </el-table-column>
        <el-table-column

                label="部署项目"
                width="150">
            <template slot-scope="scope">
                <ol>
                    <li v-for="item in scope.row.deployItem"><el-tag type="warning">{{item}}</el-tag></li>
                </ol>
            </template>

        </el-table-column>
        <el-table-column
                prop="assetStatus"
                label="状态"
                width="120">
        </el-table-column>
        <el-table-column

                label="操作"
                width="200">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">ping</el-button>
                <el-button @click="handleConsole(scope.row)" type="text" size="small">连接</el-button>
                <el-button type="text" size="small">诊断</el-button>

            </template>
        </el-table-column>
    </el-table>
    </section>
</template>

<script>

    export default {
        data() {
            return {
                filters: {
                    ip: ''
                },
                assets: [{
                    assetId: '1',
                    system: 'CentOS  6.7',
                    ipAddress: '172.21.205.32',
                    hostname: 'vm-jia-city',
                    cpuMemory: '4/16(12)',
                    deployItem: ["dp-city","dp-item"],
                    assetStatus: "在线"
                },{
                    assetId: '2',
                    system: 'CentOS 7.3.1611',
                    ipAddress: '172.21.205.31',
                    hostname: 'vm-jia-city',
                    cpuMemory: '4/16(12)',
                    deployItem: ["dp-city"],
                    assetStatus: "在线"
                },{
                    assetId: '3',
                    system: 'CentOS7.3.1611',
                    ipAddress: '172.21.205.39',
                    hostname: 'vm-jia-city',
                    cpuMemory: '4/16(12)',
                    deployItem: ["dp-city","dp-item","cu-job","hy-order"],
                    assetStatus: "在线"
                },{
                    assetId: '4',
                    system: 'CentOS 6.7',
                    ipAddress: '172.21.205.42',
                    hostname: 'vm-jia-city',
                    cpuMemory: '4/16(12)',
                    deployItem: ["dp-city"],
                    assetStatus: "在线"
                },{
                    assetId: '5',
                    system: 'Ubuntu 16.04.4 ',
                    ipAddress: '172.21.205.43',
                    hostname: 'vm-jia-city',
                    cpuMemory: '4/16(12)',
                    deployItem: ["dp-city","hy-order"],
                    assetStatus: "在线"
                },{
                    assetId: '6',
                    system: 'Ubuntu 16.04.4 ',
                    ipAddress: '172.21.205.44',
                    hostname: 'vm-mysql-1',
                    cpuMemory: '4/16(12)',
                    deployItem: ["mysql","redis-1"],
                    assetStatus: "在线"
                },
                ]
            }
        },
        methods: {
            handleConsole(row) {
                //alert(row.ipAddress)
                let consoleUrl = this.$router.resolve({
                    path: "/shell/" + row.ipAddress
                });
                window.open(consoleUrl .href, '_blank');
            }
        }

    }
</script>